<template lang="html">
    <div class="">
        <mt-loadmore ref="loadmore" :bottom-method="loadBottom" :top-status.sync="topStatus">
            <div class="movieBox">
                <div class="media" v-for="m in movieList">
                  <div class="media-left media-middle">
                    <a href="#">
                      <img class="media-object" :src="m.images.small" alt="...">
                    </a>
                  </div>
                  <div class="media-body">
                    <h4 class="media-heading">{{m.title}}</h4>
                  </div>
                </div>
            </div>


          <div slot="top" class="mint-loadmore-top">
            <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
            <span v-show="topStatus === 'loading'">Loading...</span>
          </div>
        </mt-loadmore>
    </div>
</template>

<script>
import {
	Loadmore
} from 'mint-ui';
import {
	Toast
} from 'mint-ui';
export default {
	data() {
		return {
			topStatus: '',
			movieList: []
		}
	},
	methods: {
		loadBottom() {
			let start = this.movieList.length;
			// '/api/v2/movie/in_theaters?start=10&count=10'
			let url = '/api/v2/movie/in_theaters?start=' + start + '&count=10';
			this.axios({
				url: url,
				method: 'get'
			}).then((res) => {
				let temp = res.data.subjects;
				if (temp.length == 0) {
					Toast('木有了');
					this.allLoaded = true; // if all data are loaded
					this.$refs.loadmore.onBottomLoaded();
					return;
				}
				this.movieList = this.movieList.concat(temp);
				this.allLoaded = true; // if all data are loaded
				this.$refs.loadmore.onBottomLoaded();
			})
		}
	},
	mounted() {
		this.axios({
			url: '/api/v2/movie/in_theaters?count=10',
			method: 'get'
		}).then((res) => {
			this.movieList = res.data.subjects;
			console.log(this.movieList);
		})
	}
}
</script>

<style lang="css">
.movieBox{
    border:1px solid red;
}
</style>
